<template>
  <div class="smart-search-container">
    <!-- 搜索条件侧边栏 -->
    <div class="search-sidebar">
      <el-card shadow="hover" class="condition-card">
        <h3> <el-icon><Camera /></el-icon> 图像搜索</h3>
        <!-- 图像上传 -->
        <div class="upload-section">
          <el-upload
            class="image-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleImageUpload"
          >
            <template #trigger>
              <div class="upload-content">
                <el-image
                  v-if="searchForm.image"
                  :src="searchForm.image"
                  fit="cover"
                  class="preview-image"
                />
                <div v-else class="upload-placeholder">
                  <el-icon><Upload /></el-icon>
                  <div class="text-container">
                    <p>点击上传目标照片</p>
                    <p class="subtip">支持JPG/PNG格式，建议尺寸800x600</p>
                  </div>
                </div>
              </div>
            </template>
          </el-upload>
        </div>

        <!-- 特征筛选表单 -->
        <el-form label-position="top" class="filter-form">
          <!-- 性别选择 -->
          <el-form-item label="性别">
            <el-radio-group v-model="searchForm.gender">
              <el-radio-button label="male">
                <el-icon><Male /></el-icon> 男性
              </el-radio-button>
              <el-radio-button label="female">
                <el-icon><Female /></el-icon> 女性
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <!-- 年龄范围 -->
          <el-form-item label="年龄范围">
            <el-slider
              v-model="searchForm.ageRange"
              range
              :min="0"
              :max="100"
              :marks="ageMarks"
            />
          </el-form-item>

          <!-- 时间选择 -->
          <el-form-item label="出现时间">
            <el-date-picker
              v-model="searchForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              class="full-width"
            />
          </el-form-item>

          <!-- 区域选择 -->
          <el-form-item label="出现区域">
            <el-cascader
              style="width: 100%"
              v-model="searchForm.location"
              :options="locationOptions"
              :props="{ multiple: true }"
              placeholder="选择出现区域"
              class="full-width"
              filterable
            />
          </el-form-item>

          <!-- 特征描述 -->
          <el-form-item label="特征描述">
            <el-input
              v-model="searchForm.description"
              type="textarea"
              :rows="3"
              placeholder="输入衣着、配饰等显著特征"
              resize="none"
              show-word-limit
              maxlength="200"
            />
          </el-form-item>
        </el-form>

        <!-- 搜索按钮 -->
        <el-button
          type="danger"
          :icon="Search"
          class="search-btn"
          :loading="isSearching"
          @click="handleSearch"
        >
          {{ isSearching ? '搜索中...' : '开始智能搜索' }}
        </el-button>
      </el-card>
    </div>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 实时监控 -->
      <el-card shadow="hover" class="monitor-card">
        <div class="monitor-header">
          <h3><el-icon><VideoCamera /></el-icon> 实时监控</h3>
          <div class="monitor-controls">
            <el-button-group>
              <el-button
                :type="gridLayout ? 'danger' : 'default'"
                @click="gridLayout = true"
              >
                <el-icon><Grid /></el-icon> 多画面
              </el-button>
              <el-button
                :type="!gridLayout ? 'danger' : 'default'"
                @click="gridLayout = false"
              >
                <el-icon><FullScreen /></el-icon> 单画面
              </el-button>
            </el-button-group>
            <el-button
              type="danger"
              plain
              :icon="Refresh"
              @click="refreshStreams"
            >
              刷新视频流
            </el-button>
          </div>
        </div>

        <!-- 视频容器 -->
        <div :class="['video-container', gridLayout ? 'grid-view' : 'single-view']">
          <div
            v-for="camera in activeCameras"
            :key="camera.id"
            class="video-item"
          >
            <video
              :id="'video-' + camera.id"
              class="video-js vjs-default-skin"
              controls
              preload="auto"
              :poster="camera.thumbnail"
            >
              <source :src="camera.streamUrl" type="application/x-mpegURL">
            </source>
            </video>
            <div class="camera-info">
              <div class="camera-meta">
                <span class="name">{{ camera.name }}</span>
                <span class="location">{{ camera.location }}</span>
              </div>
              <el-tag
                :type="camera.active ? 'danger' : 'info'"
                effect="dark"
                class="status-tag"
              >
                {{ camera.active ? '直播中' : '已暂停' }}
              </el-tag>
            </div>
          </div>
          <div v-if="activeCameras.length === 0" class="empty-state">
            <el-icon><VideoCamera /></el-icon>
            <p>暂无可用监控信号</p>
          </div>
        </div>
      </el-card>

      <!-- 搜索结果 -->
      <el-card shadow="hover" class="results-card">
        <div class="results-header">
          <h3><el-icon><User /></el-icon> 匹配结果 ({{ filteredResults.length }})</h3>
          <div class="results-controls">
            <div class="threshold-control">
              <span class="label">匹配阈值：</span>
              <el-slider
                v-model="matchThreshold"
                :min="0.5"
                :max="1"
                :step="0.05"
                :format-tooltip="(val: number) => `${Math.round(val * 100)}%`"
                class="slider"
              />
            </div>
            <el-button
              type="danger"
              :icon="Download"
              @click="exportResults"
            >
              导出结果
            </el-button>
          </div>
        </div>

        <!-- 结果列表 -->
        <div class="results-list">
          <transition-group name="result-fade">
            <div
              v-for="person in filteredResults"
              :key="person.id"
              class="person-card"
            >
              <el-image
                :src="person.avatar"
                class="avatar"
                fit="cover"
                :preview-src-list="[person.avatar]"
              />
              <div class="person-info">
                <h4 class="name">{{ person.name }}</h4>
                <div class="meta-info">
                  <div class="info-item">
                    <el-icon><User /></el-icon>
                    <span>{{ person.gender === 'male' ? '男' : '女' }} | {{ person.age }}岁</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Clock /></el-icon>
                    <span>{{ formatDateTime(person.lastSeen) }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Location /></el-icon>
                    <span>{{ person.lastLocation }}</span>
                  </div>
                </div>
                <el-progress
                  :percentage="person.matchRate * 100"
                  status="warning"
                  :stroke-width="12"
                  class="progress"
                />
              </div>
            </div>
          </transition-group>
        </div>
      </el-card>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import {
  Camera,
  Search,
  VideoCamera,
  Upload,
  User,
  Refresh,
  Download,
  Male,
  Female,
  Grid,
  FullScreen, Clock, Location
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import '@videojs/http-streaming'

// 类型定义
interface SearchForm {
  image?: string
  gender: 'male' | 'female'
  ageRange: [number, number]
  timeRange: [Date, Date]
  location: string[]
  description: string
}

interface CameraDevice {
  id: string
  name: string
  location: string
  streamUrl: string
  thumbnail: string
  active: boolean
  player?: any
}

interface PersonInfo {
  id: number
  name: string
  avatar: string
  gender: 'male' | 'female'
  age: number
  matchRate: number
  lastSeen: Date
  lastLocation: string
}

// 响应式数据
const searchForm = reactive<SearchForm>({
  gender: 'male',
  ageRange: [20, 40],
  timeRange: [new Date(Date.now() - 86400000), new Date()],
  location: [],
  description: ''
})

const activeCameras = ref<CameraDevice[]>([
  {
    id: 'cam-001',
    name: '北门主通道',
    location: 'A区北门',
    streamUrl: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
    thumbnail: 'https://picsum.photos/seed/1/800/450',
    active: false
  },
  {
    id: 'cam-002',
    name: '南侧停车场',
    location: 'B区南侧',
    streamUrl: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
    thumbnail: 'https://picsum.photos/seed/2/800/450',
    active: false
  },
  {
    id: 'cam-003',
    name: '东侧停车场',
    location: 'C区东侧',
    streamUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    thumbnail: 'https://picsum.photos/seed/3/800/450',
    active: false
  },
  {
    id: 'cam-004',
    name: '西侧通道',
    location: 'D区西侧',
    streamUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    thumbnail: 'https://picsum.photos/seed/4/800/450',
    active: false
  }
])

const results = ref<PersonInfo[]>([])
const gridLayout = ref(true)
const matchThreshold = ref(0.7)
const isSearching = ref(false)

// 配置数据
const locationOptions = [
  { value: 'A区北门', label: 'A区北门' },
  { value: 'B区大厅', label: 'B区大厅' },
  {value: 'C区停车场', label: 'C区停车场'},
  {value: 'D区西侧', label: 'D区西侧'},
]

const ageMarks = {
  0: '0岁',
  20: '20',
  40: '40',
  60: '60',
  80: '80',
  100: '100+'
}

// 视频播放器实例管理
const videoPlayers = ref<{ [key: string]: any }>({})

// 初始化视频播放器
const initVideoPlayer = (camera: CameraDevice) => {
  if (videoPlayers.value[camera.id]) {
    videoPlayers.value[camera.id].dispose()
  }

  const videoElement = document.querySelector(`#video-${camera.id}`) as HTMLVideoElement
  if (videoElement) {
    const player = videojs(videoElement, {
      fluid: true,
      aspectRatio: '16:9',
      controls: true,
      muted: true,
      preload: 'auto',
      playbackRates: [0.5, 1, 1.5, 2],
      sources: [{
        src: camera.streamUrl,
        type: 'application/x-mpegURL'
      }],
      controlBar: {
        children: [
          'playToggle',
          'volumePanel',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'playbackRateMenuButton',
          'fullscreenToggle'
        ],
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    })

    player.on('play', () => {
      camera.active = true
    })

    player.on('pause', () => {
      camera.active = false
    })

    videoPlayers.value[camera.id] = player
  }
}

// 方法实现
const handleImageUpload = (file: any) => {
  if (!file.raw?.type.startsWith('image/')) {
    ElMessage.error('请上传图片文件')
    return false
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    searchForm.image = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

const handleSearch = async () => {
  isSearching.value = true
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    results.value = mockData
    ElMessage.success(`找到${results.value.length}条匹配结果`)
  } catch (error) {
    ElMessage.error('搜索失败，请检查网络连接')
  } finally {
    isSearching.value = false
  }
}

// 刷新视频流
const refreshStreams = () => {
  activeCameras.value.forEach(cam => {
    if (videoPlayers.value[cam.id]) {
      videoPlayers.value[cam.id].pause()
      cam.active = false
    }
  })
  ElMessage.success('视频流已刷新')
}

const formatDateTime = (date: Date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const exportResults = () => {
  const csvContent = results.value
    .map(p => `${p.name},${p.matchRate},${p.lastLocation}`)
    .join('\n')
  const blob = new Blob([csvContent], { type: 'text/csv' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'search-results.csv'
  link.click()
}

// 计算属性
const filteredResults = computed(() => {
  return results.value
    .filter(p => p.matchRate >= matchThreshold.value)
    .sort((a, b) => b.matchRate - a.matchRate)
})

// 模拟数据
const mockData: PersonInfo[] = [
  {
    id: 1,
    name: '王小明',
    avatar: 'https://dummyimage.com/200x200/ff6b6b/fff',
    gender: 'male',
    age: 32,
    matchRate: 0.87,
    lastSeen: new Date(),
    lastLocation: 'B区大厅'
  },
  {
    id: 2,
    name: '李小红',
    avatar: 'https://dummyimage.com/200x200/ff6b6b/fff',
    gender: 'female',
    age: 28,
    matchRate: 0.78,
    lastSeen: new Date(),
    lastLocation: 'C区停车场'
  }
]

// 生命周期
onMounted(() => {
  activeCameras.value.forEach(camera => {
    initVideoPlayer(camera)
  })
})

onBeforeUnmount(() => {
  Object.values(videoPlayers.value).forEach(player => {
    if (player) {
      player.dispose()
    }
  })
})
</script>

<style scoped lang="scss">
$primary: #ff6b6b;
$secondary: #ff9f6b;
$background: #fff5f5;
$text-primary: #2c3e50;
$text-secondary: #666;

.smart-search-container {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  padding: 24px;
  width: 100%;
  margin: 0 auto;

  @media screen and (max-width: 1200px) {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }

  .search-sidebar {
    position: sticky;
    top: 24px;
    height: fit-content;

    @media screen and (max-width: 1200px) {
      position: relative;
      top: 0;
    }

    .condition-card {
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba($primary, 0.08);

      @media screen and (max-width: 768px) {
        padding: 16px;
      }

      .upload-section {
        width: 100%;
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        @media screen and (max-width: 768px) {
          margin-bottom: 16px;
        }

        :deep(.el-upload) {
          width: 100%;
        }

        :deep(.el-upload--text) {
          width: 100%;
        }

        .image-uploader {
          width: 100%;
          border: 2px dashed rgba($primary, 0.3);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.3s ease;
          background: rgba($primary, 0.02);
          cursor: pointer;

          &:hover {
            border-color: $primary;
            background: rgba($primary, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba($primary, 0.1);
          }

          .upload-content {
            position: relative;
            width: 100%;
            min-height: 240px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            @media screen and (max-width: 768px) {
              min-height: 200px;
            }

            .preview-image {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 8px;
              transition: all 0.3s ease;
              position: relative;

              &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                transition: all 0.3s ease;
              }

              &:hover::after {
                background: rgba(0, 0, 0, 0.2);
              }
            }

            .upload-placeholder {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 12px;
              padding: 0 20px;

              @media screen and (max-width: 768px) {
                gap: 8px;
                padding: 0 16px;
              }

              .el-icon {
                font-size: 48px;
                color: $primary;
                opacity: 0.8;
                transition: all 0.3s ease;
                margin: 0;

                @media screen and (max-width: 768px) {
                  font-size: 36px;
                }
              }

              .text-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;

                p {
                  margin: 0;
                  font-size: 14px;
                  line-height: 1.5;
                  color: $text-primary;
                  text-align: center;

                  @media screen and (max-width: 768px) {
                    font-size: 13px;
                  }

                  &.subtip {
                    font-size: 12px;
                    color: $text-secondary;

                    @media screen and (max-width: 768px) {
                      font-size: 11px;
                    }
                  }
                }
              }

              &:hover {
                .el-icon {
                  opacity: 1;
                  transform: scale(1.05);
                }
              }
            }
          }

          // 添加文件类型提示
          &::before {
            content: '支持 JPG/PNG 格式';
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
          }

          &:hover::before {
            opacity: 1;
          }
        }
      }

      .filter-form {
        .el-form-item {
          margin-bottom: 24px;

          &:last-child {
            margin-bottom: 0;
          }

          @media screen and (max-width: 768px) {
            margin-bottom: 16px;
          }
        }

        .full-width {
          width: 100%;
        }
      }

      .search-btn {
        margin-top: 20px;
        width: 100%;
        height: 48px;
        font-size: 16px;
        background: linear-gradient(135deg, $primary, $secondary);
        border: none;
        transition: transform 0.2s;

        @media screen and (max-width: 768px) {
          height: 40px;
          font-size: 14px;
        }

        &:hover {
          transform: translateY(-2px);
        }
      }
    }
  }

  .main-content {
    display: grid;
    gap: 24px;
    align-content: start;

    @media screen and (max-width: 1200px) {
      gap: 16px;
    }

    .monitor-card {
      border-radius: 16px;
      overflow: hidden;

      .monitor-header {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba($primary, 0.1);

        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 16px;
          align-items: flex-start;
        }

        h3 {
          color: $primary;
          margin: 0;
          font-size: 16px;
        }

        .monitor-controls {
          display: flex;
          gap: 8px;

          @media screen and (max-width: 768px) {
            width: 100%;
            justify-content: space-between;
          }
        }
      }

      .video-container {
        padding: 16px;

        @media screen and (max-width: 768px) {
          padding: 8px;
        }

        &.grid-view {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 3px;

          @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
          }
        }

        &.single-view {
          display: block;

          .video-item {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            height: 400px;

            @media screen and (max-width: 768px) {
              height: 300px;
            }
          }
        }

        .video-item {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          transition: transform 0.3s;

          &:hover {
            transform: translateY(-3px);
          }

          .video-js {
            width: 100%;
            height: 100%;
          }

          .camera-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1;

            @media screen and (max-width: 768px) {
              padding: 8px;
            }

            .camera-meta {
              .name {
                font-weight: 500;
                font-size: 14px;

                @media screen and (max-width: 768px) {
                  font-size: 12px;
                }
              }

              .location {
                font-size: 12px;
                opacity: 0.8;

                @media screen and (max-width: 768px) {
                  font-size: 10px;
                }
              }
            }

            .status-tag {
              backdrop-filter: blur(4px);
            }
          }
        }

        .empty-state {
          height: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: $text-secondary;

          @media screen and (max-width: 768px) {
            height: 200px;
          }

          .el-icon {
            font-size: 48px;
            margin-bottom: 16px;

            @media screen and (max-width: 768px) {
              font-size: 36px;
            }
          }
        }
      }
    }

    .results-card {
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba($primary, 0.08);

      .results-header {
        padding: 20px 24px;
        background: rgba($primary, 0.1);
        border-radius: 16px;

        @media screen and (max-width: 768px) {
          padding: 16px;
        }

        h3 {
          font-size: 18px;
          display: flex;
          align-items: center;
          gap: 8px;

          @media screen and (max-width: 768px) {
            font-size: 16px;
          }
        }

        .results-controls {
          display: flex;
          align-items: center;
          gap: 24px;

          @media screen and (max-width: 768px) {
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
          }

          .threshold-control {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 280px;

            @media screen and (max-width: 768px) {
              min-width: auto;
            }

            .label {
              font-size: 14px;
              color: $text-primary;
              white-space: nowrap;

              @media screen and (max-width: 768px) {
                font-size: 12px;
              }
            }

            .slider {
              flex: 1;
            }
          }
        }
      }

      .results-list {
        padding: 16px 24px 24px;
        min-height: 300px;

        @media screen and (max-width: 768px) {
          padding: 12px 16px 16px;
        }

        .person-card {
          border: 1px solid rgba($primary, 0.1);
          border-radius: 12px;
          padding: 16px;
          display: grid;
          grid-template-columns: 120px 1fr;
          gap: 20px;
          margin-bottom: 16px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

          @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 12px;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 16px rgba($primary, 0.15);
          }

          .avatar {
            width: 120px;
            height: 160px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;

            @media screen and (max-width: 768px) {
              width: 100%;
              height: 200px;
            }

            &:hover {
              transform: scale(1.02);
            }
          }

          .person-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              color: $primary;
              margin: 0 0 12px;
              font-size: 18px;
              font-weight: 600;

              @media screen and (max-width: 768px) {
                font-size: 16px;
                margin-bottom: 8px;
              }
            }

            .meta-info {
              display: grid;
              gap: 12px;
              margin-bottom: 16px;

              @media screen and (max-width: 768px) {
                gap: 8px;
                margin-bottom: 12px;
              }

              .info-item {
                display: flex;
                align-items: center;
                gap: 8px;
                color: $text-secondary;
                font-size: 14px;

                @media screen and (max-width: 768px) {
                  font-size: 12px;
                }

                .el-icon {
                  color: $primary;
                  font-size: 16px;

                  @media screen and (max-width: 768px) {
                    font-size: 14px;
                  }
                }
              }
            }

            .progress {
              :deep(.el-progress-bar) {
                padding-right: 40px;
                background: linear-gradient(90deg, $primary, $secondary);
              }

              :deep(.el-progress__text) {
                color: $primary;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
  background: #ff7875;
  border-color: #ff7875;
  box-shadow: 0 2px 8px rgba(255, 120, 117, 0.3);
}
:deep(.el-slider__bar) {
  background-color: #ff7875;
}
:deep(.el-slider__button) {
  border-color: #ff7875;
}

:deep(.video-js .vjs-big-play-button) {
  background-color: rgba(255, 107, 107, 0.8);
  border-color: #ff6b6b;
}

:deep(.video-js .vjs-big-play-button:hover) {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
}

:deep(.video-js .vjs-playback-rate .vjs-playback-rate-value) {
  font-size: 1.5em;
  line-height: 2;
}

:deep(.video-js .vjs-slider) {
  background-color: rgba(255, 255, 255, 0.3);
}

:deep(.video-js .vjs-play-progress) {
  background-color: #ff6b6b;
}

// 添加拖拽状态样式
.upload-section.is-dragover {
  .image-uploader {
    border-color: $primary;
    background: rgba($primary, 0.1);
    transform: scale(1.02);
  }
}
</style>
